﻿<div class="demo-description" id="Overview">
    <h2>
        <DemoNavLink Link="Toolbar#Overview" />Toolbar - Overview
    </h2>
    <p>The <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxToolbar">Toolbar</a> component allows you to implement an adaptive button-based interface in your Blazor application. Toolbar buttons are stored in the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxToolbar.Items">Items</a> collection, and each button is represented by a <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxToolbarItem">DxToolbarItem</a> object that can display an icon, text or both.</p>
    <p>The main Toolbar item’s API members are listed below:</p>
    <ul>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.Base.DxToolbarItemBase.Click">Click</a> - Fires when users click the toolbar item. Handle this event to specify different click handlers for different items. To specify a common click handler for all toolbar items, use the Toolbar’s <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxToolbar.ItemClick">ItemClick</a> event.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxToolbarItem.Text">Text</a> - Specifies the item’s text.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.Base.DxToolbarItemBase.BeginGroup">BeginGroup</a> – Set this property to true to create a new item group.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxToolbarItem.IconCssClass">IconCssClass</a> – Specifies the name of the CSS class applied to the toolbar item’s icon.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxToolbarItem.NavigateUrl">NavigateUrl</a> – Specifies the item’s navigation URL. When this property is specified, the button is rendered as a hyperlink.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.Base.DxToolbarItemBase.Alignment">Alignment</a> - Specifies the item’s alignment.</li>
    </ul>
</div>

<div class="card demo-card">
    <div class="card-header border-0 p-2">
        <DxToolbar ItemClick="@OnItemClick" @key="@ThemeName">
            <Items>
                <DxToolbarItem Name="Item1" Text="Item1" Tooltip="Item1" />
                <DxToolbarItem Name="Item2" Text="Item2" Tooltip="Item2" />
                <DxToolbarItem Name="Left" BeginGroup="true" IconCssClass="tb-icon tb-icon-align-left" Tooltip="Align Left" />
                <DxToolbarItem Name="Center" IconCssClass="tb-icon tb-icon-align-center" Tooltip="Align Center" />
                <DxToolbarItem Name="Right" IconCssClass="tb-icon tb-icon-align-right" Tooltip="Align Right" />

                <DxToolbarItem Name="Documentation" Text="Documentation" BeginGroup="true" IconCssClass="tb-icon tb-icon-info" Tooltip="Documentation (opened in a new tab)"
                               Alignment="ToolbarItemAlignment.Right" target="_blank"
                               NavigateUrl="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxToolbar" />
            </Items>
        </DxToolbar>
        <DemoToaster Duration="3000" @ref=@toasterRef  />
    </div>
</div>

<CodeSnippet_Toolbar_Overview />

@code {
    [CascadingParameter(Name = "ThemeName")] string ThemeName { get; set; }
    IObserver<string> toasterRef;

    void OnItemClick(ToolbarItemClickEventArgs e) {
        toasterRef.OnNext($"The '{e.ItemName}' button has been clicked");
    }
}
